<script>
import empty from "../../../../components/empty.vue"
import request from "../../../../utils/request"
import { handleUrlParams, list2tree } from "@/utils"
import downArrowIcon from "../assets/down_arrow.png"
import upArrowIcon from "../assets/up_arrow.png"
import persistence from "../../../../store/persistence"
import checkIsVip from "@/components/checkIsVip/index.vue"

export default {
  name: "practiceByYear",
  components: { empty, checkIsVip },
  props: {
    height: {
      type: String,
      default: "100vh",
    },
  },
  data() {
    return {
      yearList: [],
      queryParams: {
        structureYear: "", //默认选中的年份
        classId: "", //题目分类 id
      },
      structList: [],
      isEmpty: false,
      downArrowIcon,
      upArrowIcon,
    }
  },
  methods: {
    async init(query) {
      this.queryParams.classId = query.classId
      //获取年份列表
      this.yearList = await request({
        url: "paperStructure/listYear",
        data: this.queryParams,
        showLoading: true,
        errorHandle: true,
      })
      //年份为空
      if (!this.yearList || this.yearList.length === 0) {
        this.isEmpty = true
        return
      }
      //选择url参数里面带进来的年份
      if (this.parent.query.structureYear) {
        this.queryParams.structureYear = Number.parseInt(this.parent.query.structureYear)
      } else {
        //选择上一次选择的年份
        let obj = persistence.rememberLastQuestion.get()
        if (obj.structureYear && this.yearList.includes(obj.structureYear)) {
          this.queryParams.structureYear = obj.structureYear
          //默认选中最近一年的年份
        } else if (this.yearList && this.yearList.length > 0) {
          this.queryParams.structureYear = this.yearList[0]
        } else {
          this.isEmpty = true
        }
      }
      await this.getStructureList()
    },
    //获取结构列表
    async getStructureList() {
      const res = await request({
        showLoading: true,
        errorHandle: true,
        url: "paperStructure/listStructure",
        data: this.queryParams,
      })
			this.structList = list2tree(res, "0", "structureParentId", "structureId")
      //默认展开url里面携带的题目结构参数
      if (this.parent.query.structureId) {
        for (let item of res) {
          if (item.structureId === this.parent.query.structureId) {
            this.toggleParentNode(item)
          }
        }
        // 如果只有一个则默认展开
      } else if (this.structList.length === 1) {
        this.toggleParentNode(this.structList[0])
        //展开上一次展开的和上一次练的题
      } else {
        let obj = persistence.rememberLastQuestion.get()
        if (obj.expandParentNode || obj.lastPractice) {
          for (let item of res) {
            if (item.structureId === obj.expandParentNode) {
              this.toggleParentNode(item)
            }
            if (item.structureId === obj.lastPractice) {
              item.lastPractice = true
            }
          }
        }
      }
      this.isEmpty = this.structList.length === 0
    },
    //父节点折叠 / 展开
    toggleParentNode(item) {
      console.log(item, "item")
      this.$set(item, "showChildren", !item.showChildren)
      //记住上次展开的项
      let obj = persistence.rememberLastQuestion.get()
      persistence.rememberLastQuestion.set({
        ...obj,
        expandParentNode: item.structureId,
      })
    },
    //跳转到刷题页面
    async goToPractice(item) {
      //检查该题目所设置的付费规则
      //设置了vip规则则跳转到vip开通界面
      if (item.businessRules === "MemberFree") {
        if (!(await this.$refs.checkIsVip.checkIsVip())) return
      }
      //记录上次做的题
      let obj = persistence.rememberLastQuestion.get()
      persistence.rememberLastQuestion.set({
        ...obj,
        lastPractice: item.structureId,
      })
      uni.navigateTo({
        url: handleUrlParams("/practice/pages/index/index", {
          structureId: item.structureId,
          typeCode: item.typeCode,
          doTopicUser: item.doTopicUser,
        }),
      })
    },
    //选择了年份
    structureYearChange(year) {
      //记住上次选择的年份
      let obj = persistence.rememberLastQuestion.get()
      persistence.rememberLastQuestion.set({
        ...obj,
        structureYear: year,
      })
      this.queryParams.structureYear = year
      this.getStructureList()
    },
  },
  inject: ["parent"],
}
</script>

<template>
  <view class="component" :style="'height:' + height">
    <template v-if="!isEmpty">
      <!--			年份选择器-->
      <view class="year-selector">
        <view
          class="year-item"
          v-for="item in yearList"
          :key="item"
          :class="{ active: queryParams.structureYear === item }"
          @click="structureYearChange(item)"
          >{{ item }}
        </view>
      </view>
      <!--			题目结构列表-->
      <view class="paper-structure-list">
        <block v-for="item in structList" :key="item.structureId">
          <view class="paper-structure-item">
            <!--			有子节点-->
            <view
              class="parent-node node"
              @click="toggleParentNode(item)"
              v-if="item.children && item.children.length > 0"
              :class="{ active: item.showChildren }"
            >
              <view style="display: flex; align-items: center">
                <view class="point" :class="item.doTopicUser === '0' ? 'noDo' : 'hasDo'"></view>
                <view class="text">{{ item.structureName }}</view>
              </view>
              <!--					下箭头展开-->
              <image :src="downArrowIcon" class="icon" v-if="!item.showChildren"></image>
              <!--					上箭头收起-->
              <image :src="upArrowIcon" class="icon" v-else></image>
            </view>
            <!--		没有子节点的末级节点		-->
            <view class="children-node node" v-else @click="goToPractice(item)">
              <!--						标记是否有做过-->
              <view class="point" :class="item.doTopicUser === '0' ? 'noDo' : 'hasDo'"></view>
              <view>
                <text class="text">{{ item.structureName }}</text>
                <text class="tips" v-if="item.lastPractice">[上次]</text>
              </view>
            </view>
            <!--			父节点的子节点-->
            <template v-if="item.showChildren">
              <!--				查看做题统计（仅先前没有答题记录时才展示）-->
              <!--              <view class="children-node node" @click="" v-if="item.doTopicUser !== '0'">-->
              <!--                <text class="text">查看做题报告</text>-->
              <!--              </view>-->
              <view class="children-node node" @click="goToPractice(child)" v-for="child in item.children" :key="child.structureId">
                <view class="point" :class="child.doTopicUser === '0' ? 'noDo' : 'hasDo'"></view>
                <view>
                  <text class="text">{{ child.structureName }}</text>
                  <text class="tips" v-if="child.lastPractice">\t\t[上次]</text>
                </view>
              </view>
            </template>
          </view>
        </block>
      </view>
    </template>
    <view v-else style="width: calc(100vw - 108rpx)">
      <empty height="100vh" text="暂未录入"></empty>
    </view>
    <checkIsVip ref="checkIsVip"></checkIsVip>
  </view>
</template>

<style scoped lang="scss">
.component {
  display: flex;
  .year-selector {
    padding: 30rpx;
    height: 100%;
    overflow: auto;
    background: var(--gray-background-color);
    .year-item {
      padding: 30rpx;
      margin-bottom: 30rpx;
      border-radius: 50rpx;
      &.active {
        background: var(--theme-color);
        color: var(--text-color-white);
      }
    }
  }
  .paper-structure-list {
    padding: 50rpx;
    height: 100%;
    overflow: auto;
    width: 0;
    flex: 1;
    .node {
      min-height: 80rpx;
      border-radius: 40rpx;
      padding: 20rpx;
      margin-bottom: 40rpx;
      display: flex;
      .point {
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        margin-right: 14rpx;
        &.hasDo {
          background: #d3d3d3;
        }
        &.noDo {
          background: #ff6347;
        }
      }
      &.parent-node {
        align-items: center;
        justify-content: space-between;
        background: white;
        border: 3rpx solid #d5d5d5;
        font-weight: 500;
        font-size: 30rpx;
        transition: background-color 0.3s;
        .icon {
          width: 30rpx;
          height: 30rpx;
        }
        .text {
          //文本溢出部分自动加省略号
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      &.children-node {
        background: var(--gray-background-color);
        font-size: 28rpx;
        align-items: center;
        .tips {
          color: var(--text-color-light);
        }
      }
      &.active {
        background: var(--theme-color);
        color: var(--text-color-white);
        border: 2rpx solid transparent;
      }
    }
  }
}
</style>
